<template>
  <a-modal
    title="添加"
    :visible="$store.state.visible2"
    :footer="null"
  >
    <!--    :visible="visible"-->
    <!--    :confirm-loading="confirmLoading"-->
    <!--    @ok="handleOk"-->
    <!--    @cancel="handleCancel"-->

    <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
      <a-form-item label="姓名">
        <a-input
          v-decorator="['name', { rules: [{ required: true, message: '不能为空' }]}]"
          placeholder="请输入您的姓名"
          :option.initialValue="test"

        />
      </a-form-item>
      <a-form-item label="学号">
        <a-input
          v-decorator="['id', { rules: [{ required: true, message: '不能为空' }] }]"
          placeholder="请输入您的学号"
        />
      </a-form-item>
      <a-form-item label="班级">
        <a-input
          v-decorator="['className', { rules: [{ required: true, message: '不能为空' }] }]"
          placeholder="请输入您的班级"
        />
      </a-form-item>
      <a-form-item label="性别">
        <a-select
          v-decorator="[
          'sex',
          { rules: [{ required: true, message: '不能为空' }] },
        ]"
          placeholder="请输入您的性别"
          @change="handleSelectChange"
        >
          <a-select-option value="男">
            男
          </a-select-option>
          <a-select-option value="女">
            女
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
        <a-button type="primary" html-type="submit" class="confirmButton" @click="confirmClick">
          确认
        </a-button>
        <div style="width: 70px;display: inline-block"></div>
        <a-button @click="cancelClick">
          取消
        </a-button>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
  export default {
    name: "AddStudent",
    props: {
      Studentdata: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {
        test: 'shan',
        studentItem: {},
        formLayout: 'horizontal',
        form: this.$form.createForm(this, {name: 'coordinated'}),
      };
    },
    mounted() {
      const that = this
      this.$bus.$on('editStudent', function (key, record) {
        this.studentItem = record;
        setTimeout(() => {
          that.form.setFieldsValue({
            name: this.studentItem.name,
            id:this.studentItem.id,
            className:this.studentItem.className,
            sex:this.studentItem.sex
          })
        }, 200)
        // that.$nextTick(that.form.setFieldsValue({
        //        name: this.studentItem.name,
        //      }))

        // this.form: this.$form.createForm(this, { name: 'coordinated' }),
        // this.form.setFieldsValue([name]=this.studentItem.name)
      })


    },
    methods: {
      handleSubmit(e) {
        e.preventDefault();
        const that=this
        this.form.validateFields((err, values) => {
          if (!err) {
            this.$emit('editStudent', values,that.studentItem.key)

          }else {
            this.$store.commit('changeVisibe2')
            console.log(values)
          }

        });
      },
      handleSelectChange(value) {
      },
      cancelClick() {
        this.$store.commit('changeVisibe2')
      },
      confirmClick() {
        // setTimeout(() => {
        //   this.$store.commit('changeVisibe2')
        // }, 250)
        this.$store.commit('changeVisibe2')
      },


    },
  }
</script>

<style scoped>

</style>